<template>
  <div>
    <el-card>
      <div class="top f-row ai-c">
        <img src="../../assets/images/others/wallet.png" alt="" />
        <div class="balance mlr">
          <div class="balance_title">账户余额</div>
          <div class="balance_num">3300.00</div>
        </div>
        <div class="balance">
          <div class="balance_title">账户余额</div>
          <div class="balance_num">3300.00</div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 1.25rem; height: 34rem">
      <div slot="header" class="clearfix">
        <div class="clearfix f-row ai-c">
          <div
            v-for="i in typeList"
            :class="['title', current == i.id ? 'active' : '']"
            :key="i.id"
            @click="choiceTab(i.id)"
          >
            {{ i.name }}
          </div>
        </div>
      </div>
      <div v-if="current == 1">
        <div class="first_row f-row ai-c pt-re">
          <span class="let_txt">提现金额：</span>
          <el-input placeholder="请输入提现金额"></el-input>
          <span class="ri_txt">全部提现</span>
          <div class="tishi">可提现余额￥500.00,最低提现额度：￥10.00</div>
        </div>
        <div class="first_row">
          <span class="let_txt">选择提现地址：</span>
          <el-radio label="1">
            <img
              src="../../assets/images/others/wchat.png"
              alt=""
            />微信（推荐）
          </el-radio>
          <el-radio label="2">
            <img
              src="../../assets/images/others/alipay.png"
              alt=""
            />支付宝（推荐）</el-radio
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 1,
      typeList: [
        {
          id: 1,
          name: "提现",
        },
        {
          id: 2,
          name: "提现记录",
        },
      ],
    };
  },
  methods: {
    choiceTab(t) {
      this.current = t;
    },
  },
};
</script>
<style lang="less" scoped>
.tishi {
  position: absolute;
  bottom: 1.4rem;
  font-size: 0.875rem;
  left: 6.875rem;
  color: #838383;
}
.ri_txt {
  color: var(--themeCOlor);
  font-weight: 500;
  width: 6.25rem;
}
.first_row {
  padding-bottom: 4rem;
  .el-input {
    width: 18.75rem;
    margin-right: 1.25rem;
  }
  img {
    vertical-align: middle;
    margin-right: 0.625rem;
  }
}
.let_txt {
  color: #333333 !important;
  width: 6.875rem;
}
/deep/ .el-card__header {
  padding-bottom: 0;
}
.clearfix {
  .title {
    color: #838383;
    letter-spacing: 0.125rem;
    margin-right: 1rem;
    padding-bottom: 1.125rem;
    cursor: pointer;
  }
  .active {
    color: var(--themeCOlor);
    border-bottom: 2px solid var(--themeCOlor);
    font-weight: 600;
  }
}
.mlr {
  margin: 0 6.25rem 0 2.5rem;
}
.balance_num {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333333;
  line-height: 3rem;
}
.balance_title {
  color: #979696;
  line-height: 3rem;
}
.el-card {
  box-sizing: border-box;
}
</style>